<template>
	<div class="personal">
		<img :src='staticURL+userInfo?.headimg' v-if='userInfo?.headimg' class='bg_logo' @click="showUserDialog"/>
		<img src="@/assets/img/user-logo.png" class='bg_logo' v-else @click="showUserDialog"/>
		<div>
			<p>{{userInfo?.realname}}</p>
			<span>加入日期：{{userInfo?.create_time?.slice(0,10)}}</span>
		</div>
		<user-info-dialog v-if="isShowUserInfo" @close="close"></user-info-dialog>
	</div>
</template>

<script>
	import utils from '@/assets/js/utils';
	import UserInfoDialog from '@/components/userInfoDialog';
	import {
		queryUerInfo
	} from '@/api/personal.js';
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		components: {
			UserInfoDialog
		},
		data() {
			return {
				realname:"",
				headimg:"",
				createTime:"",
				isShowUserInfo:false,
				// userInfo:{}
			};
		},

		created() {
			// this.getUserInfo()
			// this.realname = utils.getSession('realname');
			// this.headimg = utils.getSession('headimg');
			// this.createTime = utils.getSession('createTime');
		},
		computed: {
			...mapState(['userInfo'])
		},
		
		methods:{
			...mapActions(['getUserInfo']),
			// async getUserInfo() {
			// 	const {
			// 		data,
			// 		status
			// 	} = await queryUerInfo({});
			// 	if (status !== 200) return;
			// 	if(data.code == 200){
			// 		this.userInfo = data?.data?.info || {};
			// 	}
			// 	else{
			// 		this.userInfo = {}
			// 		this.$message.warning(data && data.message || '获取数据失败');
			// 	}
			// },
			showUserDialog(){
				this.isShowUserInfo = true
			},
			close() {
				this.getUserInfo();
				this.isShowUserInfo = false;
			},
		}
	};
</script>

<style lang="scss" scoped>
	.personal{
		@include flex-row;
		img{
			display: block;
			width: 60px;
			height: 60px;
			border-radius: 50%;
			margin-right: 15px;
			cursor: pointer;
		}
		p{
			margin-bottom: 10px;
			font-size: 18px;
			color: #333333;
		}
		span{
			font-size: 14px;
			color: #999999;
		}
	}
</style>
